<template>
	<view class="uni_box">
		<view class="newcontent">
			<Nheader></Nheader>
			<!-- 轮播图 -->
			<view class="lun">
				<u-swiper :list="lunlist" :effect3d="false" bg-color="#fff" height="320" effect3d-previous-margin="60"></u-swiper>
			</view>

			<!-- 课程中心 -->
			<view class="keview">
				<view class="keone">
					<view class="keitems" :class="keindex==1?'kactive':''" @click="keClick(1)">
						<text class="kexin">课堂中心</text>
						<text class="xian"></text>
					</view>
					<view class="keitems" :class="keindex==2?'kactive':''" @click="keClick(2)">
						<text class="kexin">图书中心</text>
						<text class="xian"></text>
					</view>
				</view>
				<view class="ketwo" v-if="keindex == 1">
					<view class="knei" v-for="(item,index) in keclassdata" :key="index"  @click="getke(item,1)">{{ item.name }}</view>
				</view>
				<view class="ketwo" v-if="keindex == 2">
					<view class="knei" v-for="(item,index) in tuclassdata" :key="index" @click="getke(item,2)">{{ item.name }}</view>
				</view>
			</view>

			<!-- 课程推荐 -->
			<view  v-if="kedata" v-for="(i,ind) in kedata" :key="ind">
				<view class="ketui plr">
					<view class="kehead">
						<text class="kename">{{i.title}}</text>
						<view class="rgview" @click="getDetail(i)">
							<text class="cha">查看更多</text>
							<image src="/static/home/you.png" class="you" mode=""></image>
						</view>
					</view>
					<view class="tilist-xue">
						<view class="tiitem" v-for="(item,index) in i.list" :key="index" @click="getDetailtwo(item)">
							<image :src="item.image" class="itemimg" mode=""></image>
							<view class="itembot">
								<text class="tbiao">{{item.title}}</text>
								<view class="linview">
									<text class="jine">¥<text class="jinnum">{{item.price}}</text></text>
									<text class="mian">{{item.buy_nums}}人已学</text>
								</view>
							</view>
						</view>
					</view>
				</view>
				<view class="jieji"></view>
			</view>
			
			<!-- FRM课程推荐 -->
			<!-- <view class="ketui plr">
				<view class="kehead">
					<text class="kename">FRM课程推荐</text>
					<view class="rgview">
						<text class="cha">查看更多</text>
						<image src="/static/home/you.png" class="you" mode=""></image>
					</view>
				</view>
				<view class="tilist-xue">
					<view class="tiitem" v-for="(item,index) in 4" :key="index">
						<image src="https://cdn.uviewui.com/uview/swiper/1.jpg" class="itemimg" mode=""></image>
						<view class="itembot">
							<text class="tbiao">2022年CFA一级Kaplan英文视频</text>
							<view class="linview">
								<text class="jine">¥<text class="jinnum">1999</text></text>
								<text class="mian">3200人已学</text>
							</view>
						</view>
					</view>
				</view>
			</view>
			<view class="jieji"></view> -->
			<!-- ACCA课程推荐 -->
			<!-- <view class="ketui plr">
				<view class="kehead">
					<text class="kename">ACCA课程推荐</text>
					<view class="rgview">
						<text class="cha">查看更多</text>
						<image src="/static/home/you.png" class="you" mode=""></image>
					</view>
				</view>
				<view class="tilist-xue">
					<view class="tiitem" v-for="(item,index) in 4" :key="index">
						<image src="https://cdn.uviewui.com/uview/swiper/1.jpg" class="itemimg" mode=""></image>
						<view class="itembot">
							<text class="tbiao">2022年CFA一级Kaplan英文视频</text>
							<view class="linview">
								<text class="jine">¥<text class="jinnum">1999</text></text>
								<text class="mian">3200人已学</text>
							</view>
						</view>
					</view>
				</view>
			</view>
			<view class="jieji"></view> -->
			<!-- CPA课程推荐 -->
			<!-- <view class="ketui plr">
				<view class="kehead">
					<text class="kename">CPA课程推荐</text>
					<view class="rgview">
						<text class="cha">查看更多</text>
						<image src="/static/home/you.png" class="you" mode=""></image>
					</view>
				</view>
				<view class="tilist-xue">
					<view class="tiitem" v-for="(item,index) in 4" :key="index">
						<image src="https://cdn.uviewui.com/uview/swiper/1.jpg" class="itemimg" mode=""></image>
						<view class="itembot">
							<text class="tbiao">2022年CFA一级Kaplan英文视频</text>
							<view class="linview">
								<text class="jine">¥<text class="jinnum">1999</text></text>
								<text class="mian">3200人已学</text>
							</view>
						</view>
					</view>
				</view>
			</view> -->
		</view>
		<!-- 底部导航 -->
		<Tabbar :current="1"></Tabbar>
</view>
</template>

<script>
export default {
	data() {
		return {
			lunlist:[
				// {
				// 	image: 'https://cdn.uviewui.com/uview/swiper/1.jpg',
				// 	title: '昨夜星辰昨夜风，画楼西畔桂堂东'
				// }
			],
			cate_id:'1',
			kedata:[],
			keclassdata:[],
			keindex:1,//1课程中心 2图书中心
			tuclassdata:[],//图书分类
		}
	},
	components: {
	},
	computed: {
	},

	mounted() {

	},
	async onLoad() {
		
	},
	created(){
		this.getinit()
	},
	async onShow() {
	},
	onReachBottom: function () {
	},
	methods: {
		getinit(){
			this.fgetComboListByTui();//推荐课程
			this.fgetComboCate();//获取课程中心分类
			this.fgetBookCate();//获取图书分类
			this.getshopgetBanner();//轮播图
		},
		async getshopgetBanner(){
			let res = await this.$u.api.shopgetBanner({
				mark:'h5-shop'
			});
			this.lunlist = res
		},
		async fgetComboListByTui(){
			let res = await this.$u.api.getComboListByTui({
				cate_id:this.cate_id
			});
			// console.log(res)
			this.kedata = res
		},
		async fgetComboCate(){
			let res = await this.$u.api.getComboCate({
				// cate_id:this.cate_id
			});
			this.keclassdata = res
		},
		async fgetBookCate(){
			let res = await this.$u.api.getBookCate({
				// cate_id:this.cate_id
			});
			this.tuclassdata = res
		},
		getDetail(i){
			this.navrouter("/pages_subject/twoPage/StudPage/KeCheng?leitype=1"+'&id='+i.id);
		},
		getDetailtwo(item){
			this.navrouter("/pages_subject/twoPage/StudPage/KeDetail?id="+item.id);
		},
		keClick(e){
			this.keindex = e
			
		},
		getke(item,e){
			this.navrouter("/pages_subject/twoPage/StudPage/KeCheng?leitype="+e+'&id='+item.id);
		}
	}
}
</script>

<style lang="scss" scoped>

.newcontent {
	min-height: 100vh;
	padding-bottom: 120rpx;
	background-color: #fff;
	.lun{
		padding: 30rpx;
		margin-bottom: 25rpx;
	}
	.keview{
		background: #FFFFFF;
		margin: 0 30rpx 10rpx;
		box-shadow: 0rpx 0rpx 40rpx 0rpx rgba(202,205,217,0.4);
		.keone{
			display: flex;
			flex-direction: row;
			height: 80rpx;
			.keitems{
				background-color: #F8F8F8;
				font-weight: bold;
				font-size: 28rpx;
				color: #CCCCCC;
				width: 50%;
				display: flex;
				height: 100%;
				align-items: center;
				justify-content: center;
				position: relative;
				.xian{
					width: 10%;
					height: 6rpx;
					background: linear-gradient(-90deg, #FA4E4E, #FD894F);
					border-radius: 3rpx;
					display: inline-block;
					margin: 0 auto;
					position: absolute;
					bottom: 0;
					left: 45%;
					display: none;
				}

			}
			
			.kactive{
				background-color: #fff;
				font-weight: bold;
				font-size: 28rpx;
				color: #111111;
				.xian{
					display: inline-block;
				}
			}
		}
		.ketwo{
			padding: 25rpx;
			display: flex;
			flex-direction: row;
			flex-wrap: wrap;

			.knei{
				width: 31%;
				margin-right: 2%;
				margin-bottom: 20rpx;
				height: 64rpx;
				background: #F8F8F8;
				border-radius: 32rpx;
				display: flex;
				align-items: center;
				justify-content: center;
				font-weight: 500;
				font-size: 22rpx;
				color: #333333;
			}
		}
	}

	.ketui{
		display: flex;
		flex-direction: column;

	}
	.plr{
		padding: 0 30rpx;
	}
	.kehead{
		display: flex;
		flex-direction: row;
		align-items: center;
		margin: 40rpx 0 0rpx;

		.kename{
			font-family: PingFangSC;
			font-weight: 800;
			font-size: 36rpx;
			color: #333333;
		}
		.rgview{
			display: flex;
			flex-direction: row;
			align-items: center;
			margin-left: auto;
			.cha{
				font-family: PingFang SC;
				font-weight: 500;
				font-size: 24rpx;
				color: #CCCCCC;
			}
			.you{
				width: 10rpx;
				height: 20rpx;
				margin-left: 10rpx;
			}
		}
	}
	.tilist-xue{
		display: flex;
		flex-direction: row;
		flex-wrap: wrap;
		margin-top: 35rpx;
		.tiitem{
			width: 48%;
			display: flex;
			flex-direction: column;
			margin-bottom: 40rpx;
			background: #FFFFFF;
			border-radius: 10rpx;
			box-shadow: 0rpx 0rpx 30rpx 0rpx rgba(202,205,217,0.3);
			.itemimg{
				width: 100%;
				height: 200rpx;
				border-radius: 10rpx 10rpx 0 0;
			}
			.itembot{
				padding: 25rpx 20rpx;

			}
			.tbiao{
				font-family: PingFang SC;
				font-weight: 500;
				font-size: 28rpx;
				color: #111111;
				display: block;
				margin-bottom: 15rpx;

			}
			.timiao{
				font-family: PingFang SC;
				font-weight: 400;
				font-size: 22rpx;
				color: #999999;
			}
			.linview{
				display: flex;
				flex-direction: row;
				align-items: center;
				margin-top: 30rpx;
				.liji{
					padding: 15rpx 20rpx;
					background: #FFF0F0;
					border-radius: 26rpx;
					font-family: PingFang SC;
					font-weight: 400;
					font-size: 22rpx;
					color: #FA4E4E;
				}
				.mian{
					margin-left: auto;
					font-weight: 500;
					font-size: 20rpx;
					color: #CCCCCC;
				}
				.jine{
					font-family: DIN;
					font-weight: bold;
					font-size: 20rpx;
					color: #FA4E4E;
					.jinnum{
						font-size: 32rpx;
					}
				}
			}
			
		}
		.tiitem:nth-child(even){
			margin-left: auto;
		}
	}
	.jieji{
		height: 30rpx;
		background: #F6F7FB;
		position: relative;
		width: 100%;
	}
}
.immerse{
	width: 100%;
	height: calc(var(--status-bar-height) + env(safe-area-inset-top));
	background-color: #00c455;
	// #ifdef APP-PLUS
	height: calc(var(--status-bar-height);
	// #endif
	z-index:100;
	
}
</style>
